<template>
	<view class="i-iconBut" @click.stop="handleClick" :style="{width, height, marginBottom: bottom}">
		<i-noticeTag right="32rpx" top="8rpx" v-if="isNotice && userInfo.unReadNoticeCount"
			:num="userInfo.unReadNoticeCount"></i-noticeTag>
		<view class="skeleton" :style="{background: color,width: size, height: size}">
			<image :src="url" mode="widthFix" :style="{width: size, height: size}"></image>
		</view>
		<view class="title">
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		defineProps,
		defineEmits,
		ref,
		onMounted,
		computed
	} from 'vue'
	import useStore from '../../stores/index'

	const props = defineProps({
		height: {
			type: String,
			default: '128rpx'
		},
		width: {
			type: String,
			default: '128rpx'
		},
		bottom: {
			type: String,
			default: '0'
		},
		link: {
			type: String,
			default: ''
		},
		url: {
			type: String,
			default: ''
		},
		islogin: {
			type: Boolean,
			default: false
		},
		colors: {
			type: String,
			default: 'rgba(0,0,0,0)'
		},
		isNotice: {
			type: Boolean,
			default: false
		},
		size: {
			type: String,
			default: '80rpx'
		},
	})
	const emit = defineEmits([
		'click'
	])
	const color = ref('rgba(0,0,0,0)')
	const store = useStore()
	color.value = props.colors

	const userInfo = computed(() => {
		return store.userInfo
	})
	const handleClick = () => {
		emit('click')
	}
	onMounted(() => {
		setTimeout(() => {
			color.value = 'rgba(0,0,0,0)'
		}, 500)
	})
</script>

<style lang="scss" scoped>
	.i-iconBut {
		@include flexCC;
		position: relative;

		.title {
			min-width: 104rpx;
			text-align: center;
			@include dfont(26rpx);
			white-space: nowrap;
		}

		transition: all 0.1s ease-out;
	}

	.i-iconBut:active {
		background-color: $backColor;
	}

	.skeleton {
		margin-bottom: 12rpx;
		border-radius: 80rpx;

		image {
			margin-bottom: 12rpx;
		}
	}
</style>